<template>
    <div class="swipe">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg" >
                    <div class="box" v-for="item in list">
                        <div class="main-content page1">
                            <video style="width: 160px;height: 75px;" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
                                   poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" data-setup="{}">
                                <source :src="'http://demo.mqphp.com'+ item.path" type="video/mp4">
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                            <div class="card facebook-card" >
                                <div class="card-header no-border">
                                    <div class="facebook-avatar" style="margin-top: 5px">
                                        <img class="head_img" :src="item.userHeadImg" style="border-radius: 50%" alt=""width="30px" height="30px"/>
                                    </div>
                                    <div class="facebook-name text-left">
                                        <a :href="'/#/demo/'+item.id">{{item.content}}</a>
                                    </div>
                                    <div class="facebook-date text-left">{{item.created_at}}</div>
                                    <div class="like" @click="like($event)">
                                        <i class="icon iconfont icon-xihuan1"></i>
                                        <span style="">
                                             {{ likeCount }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="main-content">

                            <video style="width: 160px;height: 75px;" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
                                   poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" data-setup="{}">
                                <source :src="'http://demo.mqphp.com'+item.path" type="video/mp4">
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                            <div class="card facebook-card" >
                                <div class="card-header no-border">
                                    <div class="facebook-avatar" style="margin-top: 5px">
                                        <img class="head_img" :src="item.userHeadImg" style="border-radius: 50%" alt=""width="30px" height="30px"/>
                                    </div>
                                    <div class="facebook-name text-left">
                                        <a :href="'/#/demo/'+item.id">{{item.content}}</a>
                                    </div>
                                    <div class="facebook-date text-left">{{item.created_at}}</div>
                                    <div class="like" @click="like($event)">
                                        <i class="icon iconfont icon-xihuan1"></i>
                                        <span style="">
                                             {{ likeCount }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="box">-->
                        <!--<div class="main-content page1">-->
                            <!--<video style="width: 160px;height: 75px;" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"-->
                                   <!--poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" data-setup="{}">-->
                                <!--<source src="http://linuxserl.honeybot.cn:5120/download/test.mp4" type="video/mp4">-->
                                <!--<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">-->
                                <!--<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">-->
                                <!--<p class="vjs-no-js">-->
                                    <!--To view this video please enable JavaScript, and consider upgrading to a web browser that-->
                                    <!--<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>-->
                                <!--</p>-->
                            <!--</video>-->
                            <!--<div class="card facebook-card" >-->
                                <!--<div class="card-header no-border">-->
                                    <!--<div class="facebook-avatar" style="margin-top: 5px">-->
                                        <!--<img class="head_img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" style="border-radius: 50%" alt=""width="30px" height="30px"/>-->
                                    <!--</div>-->
                                    <!--<div class="facebook-name text-left">啦啦啦</div>-->
                                    <!--<div class="facebook-date text-left">2017-12-1</div>-->
                                    <!--<div class="like" @click="like($event)">-->
                                        <!--<i class="icon iconfont icon-xihuan1"></i>-->
                                        <!--<span style="">-->
                                             <!--{{ likeCount }}-->
                                        <!--</span>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="main-content">-->
                            <!--<video style="width: 160px;height: 75px;" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"-->
                                   <!--poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" data-setup="{}">-->
                                <!--<source src="http://linuxserl.honeybot.cn:5120/download/test.mp4" type="video/mp4">-->
                                <!--<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">-->
                                <!--<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">-->
                                <!--<p class="vjs-no-js">-->
                                    <!--To view this video please enable JavaScript, and consider upgrading to a web browser that-->
                                    <!--<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>-->
                                <!--</p>-->
                            <!--</video>-->
                            <!--<div class="card facebook-card" >-->
                                <!--<div class="card-header no-border">-->
                                    <!--<div class="facebook-avatar" style="margin-top: 5px">-->
                                        <!--<img class="head_img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" style="border-radius: 50%" alt=""width="30px" height="30px"/>-->
                                    <!--</div>-->
                                    <!--<div class="facebook-name text-left">啦啦啦</div>-->
                                    <!--<div class="facebook-date text-left">2017-12-1</div>-->
                                    <!--<div class="like" @click="like($event)">-->
                                        <!--<i class="icon iconfont icon-xihuan1"></i>-->
                                        <!--<span style="">-->
                                             <!--{{ likeCount }}-->
                                        <!--</span>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="box">-->
                        <!--<div class="main-content page1">-->
                            <!--<video style="width: 160px;height: 75px;" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"-->
                                   <!--poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" data-setup="{}">-->
                                <!--<source src="http://linuxserl.honeybot.cn:5120/download/test.mp4" type="video/mp4">-->
                                <!--<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">-->
                                <!--<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">-->
                                <!--<p class="vjs-no-js">-->
                                    <!--To view this video please enable JavaScript, and consider upgrading to a web browser that-->
                                    <!--<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>-->
                                <!--</p>-->
                            <!--</video>-->
                            <!--<div class="card facebook-card" >-->
                                <!--<div class="card-header no-border">-->
                                    <!--<div class="facebook-avatar" style="margin-top: 5px">-->
                                        <!--<img class="head_img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" style="border-radius: 50%" alt=""width="30px" height="30px"/>-->
                                    <!--</div>-->
                                    <!--<div class="facebook-name text-left">啦啦啦</div>-->
                                    <!--<div class="facebook-date text-left">2017-12-1</div>-->
                                    <!--<div class="like" @click="like($event)">-->
                                        <!--<i class="icon iconfont icon-xihuan1"></i>-->
                                        <!--<span style="">-->
                                             <!--{{ likeCount }}-->
                                        <!--</span>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="main-content">-->
                            <!--<video style="width: 160px;height: 75px;" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"-->
                                   <!--poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" data-setup="{}">-->
                                <!--<source src="http://linuxserl.honeybot.cn:5120/download/test.mp4" type="video/mp4">-->
                                <!--<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">-->
                                <!--<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">-->
                                <!--<p class="vjs-no-js">-->
                                    <!--To view this video please enable JavaScript, and consider upgrading to a web browser that-->
                                    <!--<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>-->
                                <!--</p>-->
                            <!--</video>-->
                            <!--<div class="card facebook-card" >-->
                                <!--<div class="card-header no-border">-->
                                    <!--<div class="facebook-avatar" style="margin-top: 5px">-->
                                        <!--<img class="head_img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" style="border-radius: 50%" alt=""width="30px" height="30px"/>-->
                                    <!--</div>-->
                                    <!--<div class="facebook-name text-left">啦啦啦</div>-->
                                    <!--<div class="facebook-date text-left">2017-12-1</div>-->
                                    <!--<div class="like" @click="like($event)">-->
                                        <!--<i class="icon iconfont icon-xihuan1"></i>-->
                                        <!--<span style="">-->
                                             <!--{{ likeCount }}-->
                                        <!--</span>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->

                </div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script>
    /* eslint-disable no-unused-vars,quotes */
    import Swiper from '../../static/swipe/js/swiper.js'
    import {DatetimePicker, Button, Toast} from 'mint-ui'

    export default {
      name: 'swipe',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          likeCount: 0,
            list:[]
        }
      },
      mounted () {
        var swiper = new Swiper('.swiper-container', {
          pagination: {
            el: '.swiper-pagination',
          },
        });
        $(".swipe").height($(window).height());

        this.getList();
      },
      methods: {
        like (e) {
          var currentTarget = e.currentTarget;
          if ( currentTarget.children[0].className == "iconfont icon-xihuan"){
            this.test();
            return;
          }
          currentTarget.children[0].className = "iconfont icon-xihuan";
          currentTarget.children[0].style.color = "red";
          this.likeCount += 1
        },
        test () {
          Toast("已经点过赞了，不能再点");
        },
          getList () {
              this.$http.get("http://vue.mqphp.com/admin/api/getJson?page=1",{
              }).then(function(res){
                  this.list = res.data.data;
                  console.log(this.list);
              },function(err){
                  console.log(err);
              })
          }
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="css" scoped>
    @import "../assets/swipe/css/swiper.css";
    @import "../../static/font/iconfont.css";
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        padding-bottom: 0;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .bg{
        background: url('../../static/images/bg.png');
        background-size: 100%;
    }
    .main-content{
        width:160px;
        margin:1rem 0 1rem 0;
        height: 130px;
        background: #fff;
        border-radius: 30px;
    }
    .main-content .content{
        height: 30%;
        margin: 1rem;
    }
    .box{
        height:100%;
        width:24%;
        margin: 1rem;
    }
    .text-left{
        text-align: left;
    }
    .facebook-card{
        border: none;margin: 0;box-shadow:none;text-align: left;padding: 0;
    }
    .card-header{
        padding: .25rem;
    }
    .facebook-name{
        font-size: 14px;margin-left: 1.5rem;margin-top: 3px;
    }
    .facebook-date{
        font-size: 12px;margin-left: 1.5rem
    }
    .like{
        display: inline-block;float: right;margin-top: -45px;text-align: center;margin-right: 5px
    }
    .like span{
        display: block;line-height: 5px;font-size: 12px;
    }
    .like i{
        font-size: 22px;
    }
</style>
